<!-- 楼盘种类内容板块 -->
<template>
  <div class="type_container">
    <div class="left">
      <div class="leftout">
        <div v-for="item in timeDetail" :key="item.id" class="timeItem">
          <TimeBox :flag="item.flag" :time="item.time" />
          <div class="detailItem" v-for="Item in item.list" :key="Item.id">
            <p class="name">{{Item.name}}</p>
            <p class="price">{{Item.price}}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="pic">
      <div class="top">
        <img src="" />
        <img src="" />
      </div>
      <div class="mid">
        <img src="" />
        <img src="" />
        <img src="" />
      </div>
      <div class="bot">
        <img src="" />
        <img src="" />
        <img src="" />
      </div>
    </div>
    <div class="bPic">
      <img src="" />
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'
import TimeBox from './timeBox.vue'
export default defineComponent({
  components: {
    TimeBox
  },
  setup () {
    const timeDetail = ref([
      {
        id: 1,
        time: '2022年9月',
        flag: true,
        list: [
          {
            id: 1,
            name: '伟星·玖樾台',
            price: '22000元/平米'
          }
        ]
      },
      {
        id: 2,
        time: '2022年9月',
        flag: false,
        list: [
          {
            id: 1,
            name: '伟星·玖樾台',
            price: '22000元/平米'
          },
          {
            id: 2,
            name: '伟星·玖樾台',
            price: '22000元/平米'
          },
          {
            id: 3,
            name: '伟星·玖樾台',
            price: '22000元/平米'
          },
          {
            id: 4,
            name: '伟星·玖樾台',
            price: '22000元/平米'
          }
        ]
      },
      {
        id: 3,
        time: '2022年9月',
        flag: false,
        list: [
          {
            id: 1,
            name: '伟星·玖樾台',
            price: '22000元/平米'
          },
          {
            id: 2,
            name: '伟星·玖樾台',
            price: '22000元/平米'
          },
          {
            id: 3,
            name: '伟星·玖樾台',
            price: '22000元/平米'
          },
          {
            id: 4,
            name: '伟星·玖樾台',
            price: '22000元/平米'
          }
        ]
      },
      {
        id: 4,
        time: '2022年9月',
        flag: false,
        list: [
          {
            id: 1,
            name: '伟星·玖樾台',
            price: '22000元/平米'
          },
          {
            id: 2,
            name: '伟星·玖樾台',
            price: '22000元/平米'
          },
          {
            id: 3,
            name: '伟星·玖樾台',
            price: '22000元/平米'
          },
          {
            id: 4,
            name: '伟星·玖樾台',
            price: '22000元/平米'
          }
        ]
      }
    ])
    return {
      timeDetail
    }
  }
})
</script>

<style lang='less' scoped>
.type_container {
  display: flex;
  margin-top: 16px;
  .left {
    width: 247px;
    height: 455px;
    overflow-y: auto;
    .leftout {
      padding-left: 3px;
    }
    .timeItem {
      position: relative;
      padding-top: 50px;
      border-left: 3px dashed rgba(147, 153, 165, 0.6);
    }
    .detailItem {
      display: flex;
      width: 200px;
      padding-left: 20px;
      padding-bottom: 12px;
      justify-content: space-between;
      .name {
        font-family: 'HarmonyOS Sans SC';
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 16px;
        color: #333333;
      }
      .price {
        font-family: 'HarmonyOS Sans SC';
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 16px;
        color: #9399a5;
      }
    }
  }
  .left::-webkit-scrollbar {
    width: 9px;
  }
  .left::-webkit-scrollbar-thumb {
    border-radius: 7px;
    -webkit-box-shadow: inset005pxrgba(0, 0, 0, 0.2);
    background: #c1c1c1;
  }
  .left::-webkit-scrollbar-track {
    -webkit-box-shadow: inset005pxrgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: #fafafa;
  }
}
.pic {
  margin-left: 16px;
  .top,
  .mid,
  .bot {
    display: flex;
    img {
      margin-right: 10px;
    }
    img:last-child {
      margin-right: 0;
    }
  }
  .top,
  .mid {
    margin-bottom: 10px;
  }
  .top {
    img {
      width: 297px;
      height: 145px;
    }
  }
  .mid {
    img {
      width: 143.5px;
      height: 145px;
    }
    img:first-child {
      width: 297px;
      height: 145px;
    }
  }
  .bot {
    img {
      width: 195px;
      height: 145px;
    }
  }
}
.bPic {
  margin-left: 14px;
  img {
    width: 301px;
    height: 455px;
  }
}
</style>
